<template>
  <div class="screen-container">
    <div class="screen-bg"></div>
    <el-row :gutter="10">
      <el-col :span="6">
        <ChartWrapper title="订单交易流水">
          <div class="circle-dots" style="height: 160px">
            <div class="circle-col">
              <CircleDot
                :offset="1"
                :value="9833209"
                :color="'#00A3FC'"
                title="全部订单"
                desc="这是一段描述"
              />
              <CircleDot
                :offset="2"
                :value="7283254"
                :color="'#2F55F8'"
                title="完成订单"
              />
            </div>
            <div class="circle-col">
              <CircleDot
                :offset="3"
                :value="1239325"
                :color="'#FFB642'"
                title="进行中订单"
              />
              <CircleDot
                :offset="4"
                :value="24566"
                :color="'#FD6059'"
                title="无效订单"
              />
            </div>
          </div>
        </ChartWrapper>
        <ChartWrapper title="时间营业额">
          <Chart Id="screen-time-income" :option="timeOption" />
        </ChartWrapper>
        <ChartWrapper title="支付方式">
          <Chart Id="screen-pay-method" :option="payOption" />
        </ChartWrapper>
      </el-col>
      <el-col :span="12"> <div class="screen-center-wrapper">
          
          <div class="total-numbers">
              <div class="total-number-item" v-for="(item, idx) in totalNumbers" :key="idx">
                  <div class="value">
                      <countTo :endVal="item.value" :duration="3000"/>
                  </div>
                  <div class="name">{{item.name}}</div>
              </div>
          </div>    
        <div class="earth-container">
            <Earth style="height: 700px"/>
        </div>
          <div class="total-numbers" style="margin-top: 620px">
              <Radar v-for="(item, idx) in secondNumbers" :key="idx" :name="item.name" :value="item.value"/>
          </div>
          </div></el-col>
      <el-col :span="6">
        <ChartWrapper title="储能站详情">
          <div class="circle-dots" style="height: 160px">
            <div class="circle-col" style="width: 49%">
              <Loader :value="44" color="#26C5F3" :rank="1" name="储能站点1" />
              <Loader :value="28" color="#FAC348" :rank="2" name="储能站点2" />
              <Loader :value="18" color="#E55B5A" :rank="3" name="储能站点3" />
            </div>
            <div class="circle-col" style="width: 49%">
              <Loader :value="15" color="#305FEC" :rank="4" name="储能站点4" />
              <Loader :value="12" color="#32C95F" :rank="5" name="储能站点5" />
              <Loader :value="8" color="#FAFAFA" :rank="6" name="储能站点6" />
            </div>
          </div>
        </ChartWrapper>

        <ChartWrapper title="电池电量">
          <div class="battery-wrapper">
            <Chart Id="battery-pie" :option="batteryOption" />
            <Loader2 color="#00A1F5" :value="40" name="电量充足" />
            <Loader2 color="#3262FE" :value="25" name="电量一般" />
            <Loader2 color="#FFBE45" :value="19" name="电量略低" />
            <Loader2 color="#FE6664" :value="8" name="电量极低" />
          </div>
        </ChartWrapper>
        <ChartWrapper title="访问统计">
          <div class="access-wrapper">
            <Chart Id="access-bar" :option="accessOption" />
          </div>
        </ChartWrapper>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ChartWrapper from "@/components/Screen/chartWrapper.vue";
import Chart from "@/components/Chart";
import countTo from "vue-count-to";
import CircleDot from "@/components/Screen/circleDot.vue";
import Loader from "@/components/Screen/loader.vue";
import Loader2 from "@/components/Screen/loader2.vue";
import Radar from "@/components/Screen/radar.vue";
import Earth from "@/components/Screen/earth.vue";

import {
  ScreenTimeIncomeOption,
  ScreenPayMethodOption,
  ScreenBatteryOption,
  ScreenAccessOption,
} from "@/utils/chartOpt";
export default {
  components: { ChartWrapper, CircleDot, Chart, Loader, Loader2, countTo, Radar, Earth },
  data() {
    return {
      timeOption: {},
      payOption: {},
      batteryOption: {},
      accessOption: {},
      totalNumbers: [],
      secondNumbers: []
    };
  },

  mounted() {
    this.getData();
  },

  methods: {
    getData() {
      this.timeOption = ScreenTimeIncomeOption({});

      this.payOption = ScreenPayMethodOption({});

      this.batteryOption = ScreenBatteryOption({});

      this.accessOption = ScreenAccessOption({});

      this.totalNumbers = [
          {name: "订单总数", value: 65449},
          {name: "累计充电量", value: 8787829},
          {name: "累积放电量", value: 7865336},
      ]

      this.secondNumbers = [
          {name: "传感数据", value: 532123},
          {name: "电池总串", value: 654254},
          {name: "报警信息", value: 129},
          {name: "储能站个数", value: 398},
      ]
    },
  },
};
</script>

<style lang="scss" scoped>
.screen-bg {
  position: fixed;
  background-color: #020507;
  background-image: url("../../assets/bg.png");
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.screen-container {
  color: white;
  font-family: "vermin";
  padding: 15px;
  .chart-template {
    width: 100%;
    background: none;
    height: 240px;
  }
}

.circle-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.circle-dot-wrapper {
  margin: 10px 0;
  width: 50%;
}

.battery-wrapper {
  position: relative;

  .circle-wrapper-2 {
    position: absolute;

    &:nth-child(2),
    &:nth-child(4) {
      left: 0;
    }

    &:nth-child(3),
    &:nth-child(5) {
      right: 0;
    }

    &:nth-child(2),
    &:nth-child(3) {
      top: 20px;
    }

    &:nth-child(4),
    &:nth-child(5) {
      bottom: 20px;
    }
  }
}
.total-numbers {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1001;
    .total-number-item {
        text-align: center;
        margin: 0 15px;
        padding: 15px;
        flex-grow: 1;
        background-image: url("../../assets/blue-bg-four.png");
        background-size: 100% 100%;
        .value {
            font-size: 24px;
            font-weight: bold;
        }
        .name {
            margin-top: 15px;
            opacity: 0.6;
        }
    }
}
.screen-center-wrapper {
    position: relative;
    .earth-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}
</style>